<template>
  <a-drawer v-model:visible="LAYER.visible" :title="LAYER.title" :width="LAYER.width"
            :closable="LAYER.closable" :mask-closable="LAYER.maskClosable" :esc-to-close="LAYER.escToClose"
            :unmount-on-close="LAYER.unmountOnClose" :footer="LAYER.footer" :ok-text="LAYER.okText"
            :ok-loading="LAYER.okLoading" :cancel-text="LAYER.cancelText" :on-before-ok="onSubmit" @close="onCancel">

    <a-form ref="formRef" :model="formState" layout="vertical" :rules="RULES">


      <a-row :gutter="12">

        <a-col :span="12">
          <a-form-item label="公众号类型" field="type" :rules="RULES.type">
            <smart-dict v-model="formState.type" :url="DictOptions.WeixinMpAccountType"  :disabled="isUpdate"/>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="公众号名称" field="name">
            <a-input v-model="formState.name" allow-clear placeholder="公众号 名称"/>
          </a-form-item>
        </a-col>




        <a-col :span="12">
          <a-form-item label="公众号appId" field="appId">
            <a-input v-model="formState.appId" allow-clear placeholder="appId" :disabled="isUpdate"/>
          </a-form-item>
        </a-col>


        <a-col :span="12">
          <a-form-item label="公众号秘钥" field="secret">
            <a-input v-model="formState.secret" allow-clear placeholder="appId"/>
          </a-form-item>
        </a-col>


        <a-col :span="12">
          <a-form-item label="令牌(Token)" field="token">
            <a-input v-model="formState.token" allow-clear placeholder="token"/>
          </a-form-item>
        </a-col>


        <a-col :span="12">
          <a-form-item label="消息加解密密钥" field="aesKey">
            <a-input v-model="formState.aesKey" allow-clear placeholder="aesKey"/>
          </a-form-item>
        </a-col>


        <a-col :span="12">
          <a-form-item label="官网二维码" field="qrPhoto">

            <smart-upload-image v-model="formState.qrPhoto" :limit="1"/>
          </a-form-item>
        </a-col>


        <a-col :span="12">
          <a-form-item label="客服二维码" field="kfPhoto">
            <smart-upload-image v-model="formState.kfPhoto" :limit="1"/>
          </a-form-item>
        </a-col>

      </a-row>

      <div v-if="serverCfg && formState.appId ">
        <a-divider :orientation="'left'">请将以下参数填写到微信公众号平台</a-divider>
        <a-descriptions :column="1">
          <a-descriptions-item label="白名单ID地址">
            <a-typography-paragraph copyable>
              {{ serverCfg.ip }}
            </a-typography-paragraph>
          </a-descriptions-item>
          <a-descriptions-item label="服务安全域名">
            <a-typography-paragraph copyable>
              {{ serverCfg.domain }}
            </a-typography-paragraph>
          </a-descriptions-item>
          <a-descriptions-item label=" 微信回调地址">
            <a-typography-paragraph copyable>
              {{ serverCfg.baseUrl + '/other/wxmp/callback/' + formState.appId }}
            </a-typography-paragraph>
          </a-descriptions-item>
        </a-descriptions>
      </div>

    </a-form>

  </a-drawer>
</template>

<script lang="ts" setup>
import {ref} from "vue";
import {DictOptions} from '@/libs/options'
import {EditDrawer} from '@/libs/core'
import {WXMP_ACCOUNT_EDIT} from "../resource/form";
import {WxmpHttp} from '../resource/http'
import {CallbackApi} from '@/libs/api'


const props = defineProps({record: {type: Object, required: true}})
const emit = defineEmits(['cancel'])
const {RULES, BODY} = WXMP_ACCOUNT_EDIT

const {addWxmpAccount, updateWxmpAccount} = WxmpHttp
const config = {tplRecord: BODY, rawRecord: props.record, rowKey: 'id', emit}

const serverCfg = ref(null)


const service = new EditDrawer(config).setAddRequest(addWxmpAccount).setUpdateRequest(updateWxmpAccount)
const {formRef, formState, LAYER, isUpdate, onCancel, onSubmit} = service
LAYER.title = isUpdate ? '修改公众号 ' : '新建公众号 '
const loadConfig = async () => {
  const {data} = await CallbackApi.getServerInfo()
  serverCfg.value = data
}
loadConfig()
</script>
